<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
      需求1：定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍
      需求2：定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点
     -->
    <!-- 准备好一个容器(模板) -->
    <div id="root">
      <h2>{{name}}</h2>
      <h2>当前的n值是:<span v-text="n"></span></h2>
      <h2>放大十倍后的n值是:<span v-big="n"></span></h2>
      <button @click="n++">点我n++</button>
      <hr />
      默认获取焦点的input元素是:<input type="text" v-fbind:value="n" />
    </div>

    <div id="root2">
      默认获取焦点的input元素是:<input type="text" v-fbind:value="n" />
    </div>

  </body>
  <script>
    // 全局自定义指定  在任意一个Vue实例中都能使用
    // 1.完整写法
    Vue.directive("fbind", {
      bind(element, binding) {
        element.setAttribute(binding.arg, binding.value);
      },
      inserted(element, binding) {
        element.focus();
      },
      update(element, binding) {
        element.setAttribute(binding.arg, binding.value);
      },
    });
    // 2.简化写法
    Vue.directive('big', function (element, binding) {
      element.innerText = binding.value * 10;
    });

    const vm = new Vue({
      el: "#root",
      data: {
        // data数据发生改变会引起模板的重新解析
        name: "张三",
        n: 1,
      },
      // 局部自定义指令
      directives: {
      },
    });

    new Vue({  // 在每个vue实例中都可以全局自定义指令
      el: "#root2",
      data: {
        n: 1,
      },
    });
  </script>
</html>
